<include file="Public:header" />
<div id="zoneHeader">
    <h2>资源占用走势图</h2>
    <ul>
        <li><a href="javascript:chart('hour')" class="btn">按小时查看</a></li>
        <li><a href="javascript:chart('day')" class="btn">按天查看</a></li>
        <li><a href="javascript:chart('month')" class="btn">按月查看</a></li>
        <li><a href="javascript:chart('year')" class="btn">按年查看</a></li>
    </ul>
</div><!--/#zoneHeader-->
<div id="zoneBody">
    <div id="ifStats"></div> <!--/#ifStats--> 
    <div id="nginxStats"></div> <!--/#nginxStats--> 
    <div id="loadStats"></div> <!--/#loadStats--> 
</div><!--/#zoneBody-->

<script type="text/javascript">
var chartsConf = function(){
    return {
        chart: {
            type: 'spline'
        },
        
        title: {
            text: '主题',
            x: -20 //center
        },
        xAxis: {
            categories: []  //X轴刻度值
        },
        yAxis: {
            title: {
                text: 'Y轴标题'
            },
            min : 0,
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '',
            crosshairs : true,   //显示指针线
            shared: true    //可同时显示多个项目对应的数据
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: []
    }
};

var ifStatsCommonConf = chartsConf(),
    loadStatsCommonConf = chartsConf(),
    nginxStatsCommonConf = chartsConf();

ifStatsCommonConf.yAxis.title.text = '带宽(MB/s)';
ifStatsCommonConf.tooltip.valueSuffix = 'MB/s';

loadStatsCommonConf.yAxis.title.text = '负载';
loadStatsCommonConf.tooltip.valueSuffix = '';

nginxStatsCommonConf.yAxis.title.text = '连接数';
nginxStatsCommonConf.tooltip.valueSuffix = '';

var date2 = new Date,
    ifStatsTimeConf = {
        hour : {
            url : '?m=ServerStats&a=apiIfStatsHour',
            title : date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + date2.getDate() +  ' ' + date2.getHours() + '点带宽走势图'
        },

        day : {
            url : '?m=ServerStats&a=apiIfStatsDay',
            title : date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + date2.getDate() + '带宽走势图'
        },

        month : {
            url : '?m=ServerStats&a=apiIfStatsMonth',
            title : date2.getFullYear() + '-' + (date2.getMonth() + 1) + '带宽走势图'
        },

        year : {
            url : '?m=ServerStats&a=apiIfStatsYear',
            title : date2.getFullYear() + '带宽走势图'
        }
    },

    loadStatsTimeConf = {
        hour : {
            url : '?m=ServerStats&a=apiLoadStatsHour',
            title : date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + date2.getDate() +  ' ' + date2.getHours() + '点负载走势图'
        },

        day : {
            url : '?m=ServerStats&a=apiLoadStatsDay',
            title : date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + date2.getDate() + '负载走势图'
        },

        month : {
            url : '?m=ServerStats&a=apiLoadStatsMonth',
            title : date2.getFullYear() + '-' + (date2.getMonth() + 1) + '负载走势图'
        },

        year : {
            url : '?m=ServerStats&a=apiLoadStatsYear',
            title : date2.getFullYear() +  '负载走势图'
        }
    },

    nginxStatsTimeConf = {
        hour : {
            url : '?m=ServerStats&a=apiNginxStatsHour',
            title : date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + date2.getDate() +  ' ' + date2.getHours() + '点连接数走势图'
        },

        day : {
            url : '?m=ServerStats&a=apiNginxStatsDay',
            title : date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + date2.getDate() + '连接数走势图'
        },

        month : {
            url : '?m=ServerStats&a=apiNginxStatsMonth',
            title : date2.getFullYear() + '-' + (date2.getMonth() + 1) + '连接数走势图'
        },

        year : {
            url : '?m=ServerStats&a=apiNginxStatsYear',
            title : date2.getFullYear() +  '连接数走势图'
        }
    };

function chart(time) {
    var ifStatsConf = ifStatsCommonConf,
        loadStatsConf = loadStatsCommonConf,
        nginxStatsConf = nginxStatsCommonConf,
        ifConf = ifStatsTimeConf[time],
        loadConf = loadStatsTimeConf[time],
        nginxConf = nginxStatsTimeConf[time];

    ifStatsConf.title.text = ifConf.title;
    loadStatsConf.title.text = loadConf.title;
    nginxStatsConf.title.text = nginxConf.title;

    var $if = $('#ifStats'),
        $load = $('#loadStats'),
        $nginx = $('#nginxStats');

    $if.html('正在获取数据...');
    $load.html('正在获取数据...');
    $nginx.html('正在获取数据...');

    $.getJSON(ifConf.url, function(j) {
        if(!j.s) {
            return false;
        }

        ifStatsConf.xAxis.categories = j.d.x;
        ifStatsConf.series = j.d.y;
        $if.highcharts(ifStatsConf);
    })

    $.getJSON(loadConf.url, function(j){
        if(!j.s) {
            return false;
        }

        loadStatsConf.xAxis.categories = j.d.x;
        loadStatsConf.series = j.d.y;
        $load.highcharts(loadStatsConf);
    })

    $.getJSON(nginxConf.url, function(j){
        if(!j.s) {
            return false;
        }

        nginxStatsConf.xAxis.categories = j.d.x;
        nginxStatsConf.series = j.d.y;
        $nginx.highcharts(nginxStatsConf);
    })
}

$(function () {
    chart('day');
});

</script>
<script src="__PUBLIC__/Js/chart/highcharts.js"></script>

<include file="Public:footer" />
